<template>
	<view class="uni-container">
		<div  id="table1" >
			<div v-if="tableData.length>0">
				<uni-table :style="{height: tableHeight + 'px' }" ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
					<uni-tr>
						<!-- <uni-th width="100" align="center">序号</uni-th> -->
						<uni-th  align="center">资产名称</uni-th>
						<uni-th  align="center">暴露面资产IP</uni-th>
						<uni-th  align="center">开放端口</uni-th>
						<uni-th  align="center">服务类型</uni-th>
						<uni-th  align="center">所属部门（科室）</uni-th>
						<uni-th  align="center">责任人姓名</uni-th>
						<uni-th  align="center">访问方式</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<!-- <uni-td align="center">{{ (pageCurrent-1)*pageSize + index + 1 }}</uni-td> -->
						<uni-td align="center">{{ item.asset_name }}</uni-td>
						<uni-td align="center">{{ item.ip }}</uni-td>
						<uni-td align="center">{{ item.open_port }}</uni-td>
						<uni-td align="center">{{ item.service_type }}</uni-td>	
						<uni-td align="center">{{ item.section_name }}</uni-td>	
						<uni-td align="center">{{ item.responsible_person_name }}</uni-td>	
						<uni-td align="center">{{ item.access_method }}</uni-td>	
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
				:total="total" @change="change" /></view>
			</div>
		</div>
        <u-empty v-if="tableData.length==0"   iconSize='200' textSize='18' mode="data" icon="@/static/empty.png" text='暂无数据'></u-empty>
	</view>
</template>

<script>
	import $ from 'common/utils/jquery-3.5.1.min.js'
	export default {
		data() {
			return {
				tableData: [],
				tableHeight:'',
				// 每页数据量
				pageSize: 15,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				dataType:'',
				title: '数据详情'
			}
		},
		onLoad(options) {
			this.$nextTick(() => {
				this.tableHeight=$(window).height() -35
				// this.watermark()
				// let userName=uni.getStorageSync('userName')
				// let phoneNumber=uni.getStorageSync('phoneNumber')
				// let time = this.$timeFormat(new Date(), 'yyyy年mm月dd日')
				// $('#table1').watermark({
				// 	texts : [userName+phoneNumber+'  '+time], //水印文字
				// 	textColor : "#DCDCDC", //文字颜色
				// 	textFont : '14px 微软雅黑', //字体
				// 	width : 200, //水印文字的水平间距
				// 	height : 150,  //水印文字的高度间距（低于文字高度会被替代）
				// 	textRotate : -20 //-90到0， 负数值，不包含-90
				// })
			})	
            this.getData(1)
		},
		activated () {//返回后初始化页面
		this.tableHeight=$(window).height() -35
			this.getData(1)
		},
		methods: {
			changeTitle(newTitle) {
			  this.title = newTitle;
			  uni.setNavigationBarTitle({
				title: this.title
			  });
			},
			// 获取数据
			async getData(pageCurrent, value = '') {
				let data
				let params
				this.loading = true
				this.pageCurrent = pageCurrent	
				this.tableData=[]
				if(this.$route.query.DeptID){
					params=`?PageIndex=${pageCurrent}`+`&PageSize=${this.pageSize}`+"&OrderField="+`&DeptID=${this.$route.query.DeptID}`
				}else{
					params=`?PageIndex=${pageCurrent}`+`&PageSize=${this.pageSize}`+"&OrderField="
				} 
				if(this.$route.query.type=='AssetData'){
					this.changeTitle('高危端口');
					data = await this.$api.getAssetHightPortData(params); // 获取管理员-高危端口明细
				}else if(this.$route.query.type=='DeptAssetDetailsData'){
					this.changeTitle('高危端口');
					data = await this.$api.getDeptHightPortData(params); // 获取管理员-部门高危端口明细
				}else if(this.$route.query.type=='UserAssetData'){
					this.changeTitle('高危端口');
					data = await this.$api.getUserHightPortData(params); // 获取个人高危端口明细
				}else if(this.$route.query.type=='DeptAssetData'){
					this.changeTitle('高危端口');
					data = await this.$api.getUserDeptHightPortData(params); // 获取部门-部门高危端口明细
				}else if(this.$route.query.type=='AssetExData'){
					this.changeTitle('暴露面数');
					data = await this.$api.getExposePageList(params); // 管理员暴露面明细
				}else if(this.$route.query.type=='DeptAssetDetailsExData'){
					this.changeTitle('暴露面数');
					data = await this.$api.getDeptIdExposePageList(params); // 管理员根据部门id暴露面明细
				}else if(this.$route.query.type=='DeptAssetExData'){
					this.changeTitle('暴露面数');
					data = await this.$api.getDeptExposePageList(params); // 部门暴露面明细
				}else if(this.$route.query.type=='UserAssetExData'){
					this.changeTitle('暴露面数');
					data = await this.$api.getUserExposePageList(params); // 个人暴露面明细
				}
				
				if (data.Code == 200) {
					this.loading = false
					this.tableData=data.Data.rows
					this.total = data.Data.total
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}		
				this.loading = false
			},
			watermark(){
				var watermark = function(self){
					this.elem = self;
				}				
				watermark.prototype = {
					defaults : {
						texts : ['此处水印文字'],
						width : 100, //每行水印文字的水平间距
						height : 100, //水印文字的高度间距（低于文字高度会被替代）
						textRotate : -30 , //文字旋转 度数
						textColor : '#ede8e8', //文字颜色
						textFont : '15px 微软雅黑' //字体
					},
					options : {
						canvas : []
					},
					init : function(options){
						$.extend(this.options, this.defaults, options);
						var $body = $('body'),
							can1 = this.__createCanvas($body),
							can2 = this.__createCanvas($body),
							canAll = this.__createCanvas($body),
							settings = this.options,
							txtlen = settings.texts.length;
				
						settings.deg = settings.textRotate * Math.PI / 180; //js里的正弦余弦用的是弧度
				
						this.__calcTextSize($body);
						var repeatTimes = Math.ceil(screen.width / settings.txts.length / settings.width);
						settings.canvasWidth = settings.canvasWidth * repeatTimes;
						var extTxts = [];
						while(repeatTimes--) extTxts = extTxts.concat(settings.txts);
						settings.txts = extTxts;
				
						var fixH = settings.maxWidth * Math.abs(Math.sin(settings.deg)) + Math.cos(settings.deg) * settings.textHeight;
						if(fixH > settings.height) settings.height = fixH;
						var ctx1 = this.__setCanvasStyle(can1, settings.canvasWidth, settings.height);
						var ctx2 = this.__setCanvasStyle(can2, settings.canvasWidth, settings.height);
						var ctx = this.__setCanvasStyle(canAll, settings.canvasWidth, settings.height * 2, true);
				
						this.__drawText(ctx1, settings.txts);
						this.__drawText(ctx2, settings.txts.reverse());
				
						//合并canvas
						ctx.drawImage(can1, 0, 0, settings.canvasWidth, settings.height);
						ctx.drawImage(can2, 0, settings.height, settings.canvasWidth, settings.height);
						var dataURL = canAll.toDataURL("image/png");
						$(this.elem).css('backgroundImage', "url("+ dataURL +")");
						//this.__destory();
					},
					__createCanvas : function($container){
						var canvas = document.createElement('canvas');
						$container.append(canvas);
						this.options.canvas.push(canvas);
						return canvas;
					},
					__calcTextSize : function($container){
						var txts = [],
							maxWidth = 0,
							canvasWidth = 0,
							settings = this.options;
						$.each(settings.texts, function(i, text){
							var span = $('<span style="font:'+settings.textFont+';visibility: hidden;display: inline-block;"> '+text+ '</span>')
								.appendTo($container);
							var tWidth = span[0].offsetWidth,
								tHeight = span[0].offsetHeight;
							span.remove();
							txts.push({
								txt : text,
								width : tWidth,
								height : tHeight
							});
							maxWidth = Math.max(maxWidth, tWidth);
							settings.textHeight = tHeight;
							var shadow = Math.cos(settings.deg) * tWidth;
							canvasWidth += (settings.width < shadow ? shadow : settings.width) - tHeight * Math.sin(settings.deg);
						});
						settings.txts = txts;
						settings.maxWidth = maxWidth;
						settings.canvasWidth = canvasWidth;
					},
					__setCanvasStyle : function(canvas, width, height, notextstyle){
						canvas.width = width;
						canvas.height = height;
						canvas.style.display='none';
				
						var ctx = canvas.getContext('2d');
						if(!notextstyle){
							var deg = this.options.deg,
								absSindeg = Math.abs(Math.sin(deg));
							ctx.rotate(deg);
							//基于视窗的 x、y偏移量
							var offset = absSindeg * this.options.height - this.options.textHeight * absSindeg;
							var nx = - offset * Math.cos(deg),
								ny = - offset * absSindeg;
							ctx.translate( nx, ny * absSindeg);
				
							ctx.font = this.options.textFont;
							ctx.fillStyle = this.options.textColor;
							ctx.textAlign = 'left';
							ctx.textBaseline = 'Middle';
						}
						return ctx;
					},
					__drawText: function(ctx, txts){
						var settings = this.options;
						$.each(txts, function(i, obj){
				
							var wnap = (settings.maxWidth - obj.width) / 2 ;
							var x = settings.width * Math.cos(settings.deg) * i,
								y = - x * Math.tan(settings.deg) + settings.height;
							ctx.fillText(obj.txt, x + wnap, y);
						});
					},
					__destory : function(){
						$.each(this.options.canvas, function(i, canvas){
							canvas.remove();
							canvas = null;
						});
					}
				}
				
				$.fn.watermark = function(options){
					new watermark(this).init(options);
				}

			},
			change(e) {
			  this.getData(e.current)
			},


		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}
	.link-demo {
		margin-top: 80rpx;
	}
	// page {
	// /* background: #DAEEFC; */
	// background-color: #f3f4f6;
	// }
	// .content {
	// margin-left: 1vw;
	// width: 98vw;
	// display: flex;
	// flex-direction: column;
	// padding-bottom: 360px;
	// /*   align-items: center;
	// justify-content: center; */	
	// }
	// .charts-box {	
	// height: 360px;
	// }
	/deep/.uni-pagination__total{
		margin-right: 5px !important;
	}
	/deep/.uni-table-loading{
		height: 100%!important;
	}
	/deep/.u-icon--bottom{
		margin-top: 100px!important;
	}
	/deep/.uni-table-tr:nth-child{
		background: none!important;
	}
	/deep/.uni-table{
		background: none!important;
	}
	/deep/.uni-table-tr{
		background: none!important;
	}
	/deep/.uni-pagination-box{
		background: #f8fafc;
	}
</style>
